<template>
  <div class="dialogForm-container">
    <el-drawer
      :title="dialogForm.id ? '修改客户' : '添加客户'"
      :visible.sync="dialogFormVisible"
      :wrapper-closable="false"
      size="40%"
      style="height: 100%"
      :before-close="cancel"
    >
      <el-form
        ref="dialogForm"
        label-width="130px"
        size="small"
        :model="dialogForm"
      >
        <!-- 客户名称 -->
        <el-form-item prop="name" label="客户名称">
          <el-input
            v-model="dialogForm.name"
            autocomplete="off"
            style="width: 70%"
          />
        </el-form-item>
        <!-- 性别 -->
        <el-form-item prop="sex" label="性别">
          <el-radio v-model="dialogForm.sex" :label="true">男</el-radio>
          <el-radio v-model="dialogForm.sex" :label="false">女</el-radio>
        </el-form-item>
        <!-- 出生日期 -->
        <el-form-item prop="date" label="出生日期">
          <el-date-picker
            v-model="dialogForm.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <!-- 地址，省市区三级联动组件 -->
        <el-form-item label="客户地址">
          <!-- 省 -->
          <el-select
            v-model="dialogForm.a1"
            placeholder="省"
            style="width: 22%"
            @change="getA2List"
          >
            <el-option
              v-for="a1 in a1List"
              :key="a1.adcode"
              :label="a1.name"
              :value="a1.name"
            />
          </el-select>
          <!-- 市 -->
          <el-select
            v-model="dialogForm.a2"
            placeholder="市"
            style="width: 22%; margin-left: 2%"
            @change="getA3List"
          >
            <el-option
              v-for="a2 in a2List"
              :key="a2.adcode"
              :label="a2.name"
              :value="a2.name"
            />
          </el-select>
          <!-- 区（县） -->
          <el-select
            v-model="dialogForm.a3"
            placeholder="区"
            style="width: 22%; margin-left: 2%"
          >
            <el-option
              v-for="(a3, $index) in a3List"
              :key="$index"
              :label="a3.name"
              :value="a3.name"
            />
          </el-select>
          <!-- 详细 -->
          <el-input
            v-model="dialogForm.a4"
            type="textarea"
            autocomplete="off"
            style="width: 70%; margin-top: 1%"
            rows="3"
            placeholder="请在这里输入详细地址"
          />
        </el-form-item>
        <!-- 上传客户证件照 -->
        <el-form-item prop="image" label="证件照">
          <el-upload
            class="avatar-uploader"
            action="dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img
              v-if="dialogForm.image"
              :src="dialogForm.image"
              class="avatar"
            >
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过2MB
            </div>
          </el-upload>
        </el-form-item>
        <!-- 客户状态 -->
        <el-form-item prop="flag" label="客户状态">
          <el-radio v-model="dialogForm.flag" :label="true">启用</el-radio>
          <el-radio v-model="dialogForm.flag" :label="false">禁用</el-radio>
        </el-form-item>
        <!-- 身份证号 -->
        <el-form-item prop="idcard" label="身份证号">
          <el-input
            v-model="dialogForm.idcard"
            autocomplete="off"
            style="width: 70%"
          />
        </el-form-item>
        <!-- 联系方式 -->
        <el-form-item prop="telephone" label="电话">
          <el-input
            v-model="dialogForm.telephone"
            autocomplete="off"
            style="width: 70%"
          />
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input
            v-model="dialogForm.email"
            autocomplete="off"
            style="width: 70%"
          />
        </el-form-item>
        <!-- 备注内容 -->
        <el-form-item prop="others" label="备注内容">
          <el-input
            v-model="dialogForm.others"
            type="textarea"
            autocomplete="off"
            style="width: 70%"
            rows="3"
          />
        </el-form-item>
        <!-- 按钮 -->
        <el-row style="text-align: right; margin: 50px 30px 10px 0px">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="confirm"
          >确认</el-button>
        </el-row>
      </el-form></el-drawer>
  </div>
</template>

<script>
export default {
  name: 'DialogForm',
  data() {
    return {
      // 控制弹框的显示与隐藏
      dialogFormVisible: false,
      // 存放表单数据
      dialogForm: {
        id: '',
        name: '',
        code: '',
        // 省
        a1: '',
        // 市
        a2: '',
        // 区（县）
        a3: '',
        // 详细地址（镇、村等）
        a4: '',
        image: '',
        date: '',
        flag: true,
        bank: '',
        card: '',
        contact: '',
        sex: true,
        telephone: '',
        others: '无'
      },
      // 文件上传头文件
      headers: {
        'token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6IjEiLCJleHAiOjE2NDk0ODc1ODksInVzZXJuYW1lIjoiYWRtaW4ifQ.ctbkiTFWQFe8b5vXe2B6bkcPB7ZeGEEdZbN7Q1SMYPg'
      },
      // id1列表
      a1List: [],
      // id2列表
      a2List: [],
      // id3列表
      a3List: []
    }
  },
  mounted() {
    // 获取省级名称
    this.getA1List()
  },
  methods: {
    // 重置表单并显示弹窗
    async dialogFormOn() {
      // 显示表单
      this.dialogFormVisible = true
      // 重置表单
      this.$nextTick(() => {
        // resetFields只能重置添加了prop属性的数据
        this.dialogForm.id = ''
        this.dialogForm.a1 = ''
        this.a2List = []
        this.a3List = []
        this.dialogForm.a2 = ''
        this.dialogForm.a3 = ''
        this.dialogForm.a4 = ''
        this.$refs.dialogForm.resetFields()
      })
    },
    // 关闭弹窗
    async dialogFormOff() {
      // 关闭（隐藏）弹窗
      this.dialogFormVisible = false
    },
    // 添加|修改单位信息
    async add() {
      // 添加单位信息
      if (!this.dialogForm.id) {
        const response = await this.$API.customer.add(this.dialogForm)
        if (response.code === 200) {
          // 成功提醒
          this.$message.success('客户信息添加成功！')
          // 关闭弹窗
          this.dialogFormOff()
          // 通知父组件，重新拉取客户信息
          this.$emit('getCustomerList')
        } else {
          // 失败提醒
          this.$message.error(response.msg)
        }
      } else {
        // 修改客户信息
        const response = await this.$API.customer.modify(this.dialogForm)
        if (response.code === 200) {
          // 成功提醒
          this.$message.success('客户信息修改成功！')
          // 关闭弹窗
          this.dialogFormOff()
          // 通知父组件，重新拉取客户信息
          this.$emit('getCustomerList')
        } else {
          // 失败提醒
          this.$message.error(response.msg)
        }
      }
    },
    // 文件上传成功
    handleAvatarSuccess(res, file) {
      // 存储上传后返回的文件链接
      this.dialogForm.image = res.data
    },
    // 文件上传前
    beforeAvatarUpload(file) {
      // 验证文件格式
      const isType = (file.type === 'image/jpeg') || (file.type === 'image/png')
      // 验证文件大小
      const isSize = file.size / 1024 / 1024 < 2

      // 异常弹窗提醒
      if (!isType) {
        this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
      }
      if (!isSize) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isType && isSize
    },
    // 取消添加|修改
    cancel() {
      this.$confirm('是否取消【客户信息】的' + (this.dialogForm.id ? '修改' : '添加') + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认取消
        this.dialogFormVisible = false
      }).catch(() => {
        // 取消取消
      })
    },
    // 确认添加|修改
    confirm() {
      this.$confirm('是否确定【客户信息】的' + (this.dialogForm.id ? '修改' : '添加') + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认添加|修改，调用接口
        this.add()
        // 保存成功，关闭抽屉
        this.dialogFormVisible = false
      }).catch(() => {
        // 取消添加
      })
    },
    // 省级数据
    async getA1List() {
      // 调用接口
      const response = await this.$API.customer.district('中国')
      // 保存数据
      this.a1List = JSON.parse(response.data).districts[0].districts
    },
    // 市级数据
    async getA2List() {
      // 调用接口
      const response = await this.$API.customer.district(this.dialogForm.a1)
      // 保存数据
      this.a2List = JSON.parse(response.data).districts[0].districts
      // 清空数据
      this.a3List = []
      this.dialogForm.a2 = ''
      this.dialogForm.a3 = ''
    },
    // 区级数据
    async getA3List() {
      // 调用接口
      const response = await this.$API.customer.district(this.dialogForm.a2)
      // 保存数据
      this.a3List = JSON.parse(response.data).districts[0].districts
      // 清空数据
      this.dialogForm.a3 = ''
    }
  }
}
</script>

// 文件上传样式
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>

// 解决ElementUI超高后不显示的问题
<style>
.el-drawer__body {
  overflow: auto;
}
.el-drawer__container ::-webkit-scrollbar {
  display: none;
}
</style>

